<!--父级页面:控制处登录页以外的所有页面共有的头部与左侧菜单栏-->
<template>
  <!-- display: flex;表示给父元素使用弹性布局
   效果:所有子元素横置,且父元素会根据子元素横置后的实际高度自动填充高度 -->
  <div style="display: flex;">
    <!-- isCollapse值为true,折叠左侧菜单栏,宽度为64px,不折叠时宽度为208px   -->
    <div :style="{width:( isCollapse ? '64px' : '208px' )}">
      <!-- 左侧菜单栏
      unique-opened只允许打开一个菜单项  router允许菜单项进行路由跳转 -->
      <el-menu
          ref="menuRef"
          text-color="black"
          active-text-color="#ff0"
          style="width: 100%;height: 100vh;"
          :collapse="isCollapse"
          :collapse-transition="false"
          router unique-opened
          @select="selectMenu"
      >
        <!-- 左侧菜单栏的顶部条 -->
        <el-row style="padding-top: 10px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left:7px;">
            <el-avatar src="https://img.88icon.com/upload/jpg/20210523/8973720143cf5788e2f6eeda3b44a1a6_62587_800_845.jpg!bg" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <span style="color:black;font-weight: bold;position:relative;top:8px;left:2px;">养老公寓系统</span>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px;"><House /></el-icon> <span>首页</span>
          </template>
          <el-menu-item index="/index">控制台</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><User /></el-icon> <span>老人管理</span>
          </template>
          <el-menu-item index="/elderly">老人信息</el-menu-item>
        </el-sub-menu>



        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;"><EditPen /></el-icon> <span>评估管理</span>
          </template>
          <el-menu-item index="/healthe">健康评估</el-menu-item>
<!--          <el-menu-item index="/amount">消费提醒</el-menu-item>-->
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;"><School /></el-icon> <span>入住管理</span>
          </template>
          <el-menu-item index="/bed">床位管理</el-menu-item>
          <el-menu-item index="/belongings">物品管理</el-menu-item>
          <el-menu-item index="/checkinrecord">入住记录</el-menu-item>
          <el-menu-item index="/excused">请假管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px;"><Avatar /></el-icon> <span>员工管理</span>
          </template>
          <el-menu-item index="/employee">员工列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon style="font-size: 21px;"><ForkSpoon /></el-icon> <span>商品管理</span>
          </template>
          <el-menu-item index="/goods">商品信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon style="font-size: 21px;"><List /></el-icon> <span>订单管理</span>
          </template>
          <el-menu-item index="/order">余额查询</el-menu-item>
          <el-menu-item index="/balance">账单明细</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>
            <el-icon style="font-size: 21px;"><List /></el-icon> <span>公告管理</span>
          </template>
          <el-menu-item index="/notice">公告信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>
            <el-icon style="font-size: 21px;"><MessageBox/></el-icon> <span>数据字典</span>
          </template>
          <el-menu-item index="/dict">字典管理</el-menu-item>
          <el-menu-item index="/dictOption">字典项管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>
            <el-icon style="font-size: 21px;"><MessageBox/></el-icon> <span>健康咨询</span>
          </template>
          <el-menu-item index="/healthCounse">健康咨询管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 右侧始终为100%减去左侧菜单栏的宽度  -->
    <div :style="{width:( isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)' )}" class="right">
      <!-- 右侧顶部条与主体内容 -->
      <el-header style="height:10vh;background-color:#fff;padding-top:22px;">
        <!-- 折叠图标与用户名选项 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size:20px;" @click="changeCollapse"><Expand/></el-icon>
          </el-col>
          <el-col :span="6" style="position:relative;">
            <el-dropdown trigger="click" style="position: absolute;right:20px;">
              <span style="font-size:19px;font-weight:bold;">
               {{ user.empName || 'Guest' }}
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--        面包屑导航-->
        <el-breadcrumb separator="/" style="position: relative;top: 20px">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="height:90vh;padding: 0;overflow-y: auto">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref ,nextTick ,provide,watch } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";  // 引入 useRoute 来获取当前路由信息

// 定义变量控制左侧菜单栏是否折叠
const isCollapse = ref(false);

// 用户信息
const user=ref(getUser());

// 创建一个引用用于获取 el-menu 组件
const menuRef = ref(null); // 定义 menuRef
provide('menuRef', menuRef); // 使用 provide 传递给子组件


// 页面加载时获取用户信息
onMounted(async () => {
  user.value = getUser();
  // 检查当前路径是否为 '/index'，如果是，则自动展开 "控制台" 子菜单
  if (window.location.pathname === "/index") {
    await nextTick(() => {
      const menu = menuRef.value;  // 获取 el-menu 的引用
      if (menu) {
        menu.open(1);  // 自动展开 "控制台" 子菜单
      }
    });
  }
});



// 定义方法处理左侧菜单栏是否折叠
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 退出登录函数
const logout = () => {
  if (confirm("您确认要退出登陆么?")) {
    // 清除 localStorage 和用户数据
    localStorage.removeItem("user");
    localStorage.removeItem("breadcrumb");
    user.value = {}; // 清空当前用户信息
    // 跳转到登录页
    window.location.href = "/login";
  }
}
// 定义维护菜单项index与面包屑导航的对应关系
let map={
  '/index':['控制台'],
  '/elderly':['老人信息管理','老人信息'],
  '/healthe':['评估管理','健康评估'],
  // '/amount':['评估管理','消费提醒'],
  '/bed':['入住管理','床位管理'],
  '/belongings':['入住管理','物品管理'],
  '/excused':['入住管理','请假管理'],
  '/checkinrecord':['入住管理','入住记录'],
  '/employee':['员工管理','员工列表'],
  '/goods':['商品管理','商品信息'],
  '/order':['订单管理','余额查询'],
  '/balance':['订单管理','账单明细'],
  '/notice':['公告管理','公告信息'],
  '/dict':['数据字典','字典管理'],
  '/dictOption':['数据字典','字典项管理'],
  '/healthCounse':['健康咨询','健康咨询管理'],
};

// 当前面包屑导航
const breadcrumb = ref(
    JSON.parse(localStorage.getItem("breadcrumb")) || ["控制台"]
);

// 选择菜单项时更新面包屑导航
const selectMenu = (index) => {
  breadcrumb.value = map[index];
  localStorage.setItem("breadcrumb", JSON.stringify(breadcrumb.value));
};
// 获取当前路由
const route = useRoute();

// 监听路由变化更新面包屑
watch(route, (newRoute) => {
  const path = newRoute.path;
  if (map[path]) {
    breadcrumb.value = map[path];
    localStorage.setItem("breadcrumb", JSON.stringify(breadcrumb.value));
  }
});
</script>

<style scoped>
.el-menu {
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
.el-menu-item {
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
.el-menu-item.is-active {
  color: black;
}
.right {
  background-image: url("https://www.huiyangtong.com/images/banner1.webp");
}
</style>